<template>
  <div class="chart-item">
    <header>
      <div>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <span>{{ info.name }}</span>
    </header>
    <footer>
      <img :src="info.image" :alt="info.name" />
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ChartItemInterface } from "@/types/package";

// 每个图表组件都需要定义一个组件类
defineProps<{
  info: ChartItemInterface;
}>();
</script>

<style scoped lang="scss">
.chart-item {
  padding: 5px 0;
  cursor: move;
  header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    background-color: #eee;
    padding: 3px 5px;
    box-sizing: border-box;
    border-radius: 5px 5px 0 0;
    color: #666;
    div {
      display: flex;
      align-items: center;
      span {
        margin-right: 5px;
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        &:first-child {
          background-color: var(--el-color-success);
        }
        &:nth-child(2) {
          background-color: var(--el-color-warning);
        }
        &:last-child {
          background-color: var(--el-color-danger);
        }
      }
    }
  }
  footer {
    height: 110px;
    background-color: #f8f8f8;
    border-radius: 0 0 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      &:hover {
        transform: scale(1.1);
        transition: transform 0.6s;
      }
    }
  }
  &:hover {
    opacity: 0.8;
  }
}
</style>
